<template>
  <div class="navContent">
    <div class="firstNavTop" v-if="showFirstNav">
      <firstNavCustom :firstNav="navConfig.firstNav" @changeNav="changeNav($event)"></firstNavCustom>
    </div>
    <div class="firstNavContent">
      <div class="secondNavContent">
        <secondNavIndex :secondNavConfig="navConfig.secondNavConfig">
          <slot></slot>
        </secondNavIndex>
      </div>
    </div>
  </div>
</template>
<script>
import firstNavCustom from "./firstNavCustom";
import secondNavIndex from "./secondNavIndex";
export default {
  props: ["navConfig"],
  components: { firstNavCustom, secondNavIndex },
  data() {
    return {};
  },
  watch: {},
  computed: {
    showFirstNav() {
      return this.navConfig.firstNav.navData.navList.length || false;
    }
  },
  created() {
  },
  methods: {
    changeNav(val) {
      let path = val.path;
      sessionStorage.setItem("currentNav", path);
    }
  }
};
</script>
<style lang="less" scoped>
.navContent {
  display: flex;
  flex-flow: column nowrap;
  padding: 15px;
  height: calc(100% - 60px);
  .firstNavTop {
    height: @kr-first-nav-height;
    margin-bottom: 15px;
  }
  .firstNavContent {
    height: calc(100% - 48px);
  }
}
.secondNavContent,
.noNavcontent {
  // height: calc(100% - @kr-first-nav-height);
  height: 100%;
}
.noNavcontent {
  background-color: #ffffff;
}
.noFirstNav {
  height: 100% !important;
}
</style>
